<style lang="less" scoped>
.help{
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
    }
    
}
</style>

<template>
    <div class="help">
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Row class="" :gutter="10">
                        <Col :md="4" :lg="2">
                            <div style="margin-top: 5px;">
                                <Icon type="ios-pulse"></Icon>
                                {{this.$route.meta.title}}
                            </div>
                        </Col>
                        <Col :md="20" :lg="22">
                            <Button type="primary"  size="small" style="margin-top: 0px;float: right;" @click="addHelp">添加</Button>
                        </Col>
                    </Row>
                </p>
                <div class="line-chart-con">
                    <Table border stripe :columns="title" :data.sync="data" ></Table>
                </div>
            </Card>
        </Row>
        <Modal
            v-model="editmodal"
            title="编辑帮助信息"
            width="400"
            @on-ok="editok"
            @on-cancel="editcancel">
            <!-- <textarea id="articleEditor"></textarea> -->
            <Form :model="thisform" :label-width="80">
                <FormItem label="标题：">
                    <Input v-model="thisform.title" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="内容：">
                    <Input v-model="thisform.context" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入内容"></Input>
                </FormItem>
            </Form>
        </Modal>
        <Modal
            v-model="addmodal"
            title="添加帮助信息"
            width="400"
            @on-ok="addok"
            @on-cancel="addcancel">
            <!-- <textarea id="articleEditor"></textarea> -->
            <Form :model="addform" :label-width="80">
                <FormItem label="标题：">
                    <Input v-model="addform.title" placeholder="请输入标题"></Input>
                </FormItem>
                <FormItem label="内容：">
                    <Input v-model="addform.context" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入内容"></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>

export default {
    components: {
        
    },
    data () {
        return {
            editmodal: false,
            addmodal: false,
            data:[],
            thishelp:0,
            thisform:{
                id:0,
                version:0,
                context:'',
                title:''
            },
            addform:{
                context:'',
                title:''
            },
            title:[
                {
                    title:'标题',
                    key: 'title',
                    align:'center',
                },
                {
                    title:'内容',
                    key: 'context',
                    align:'center',
                    render: (h, params) => {
                        return h('div',{
                            style:{
                                overflow: 'hidden',
                                textOverflow:'ellipsis',
                                whiteSpace: 'nowrap'
                            }
                        },params.row.context);
                    }
                },
                {
                    title:'最后操作时间',
                    key: 'updated',
                    align:'center',
                },
                {
                    title:'操作',
                    key: '',
                    align:'center',
                    render: (h, params) => {
                        let _this=this
                        return h('div',[
                            h('Button', {
                                props: {
                                    size: 'small',
                                    type:'primary',
                                },
                                style:{
                                    
                                },
                                on:{
                                    click(){
                                        // tinymce.get('articleEditor').setContent(params.row.context)
                                        
                                        _this.editmodal=true
                                        _this.thishelp=params.index
                                        _this.thisform={
                                            id:params.row.id,
                                            version:params.row.version,
                                            context:params.row.context,
                                            title:params.row.title
                                        }
                                        // _this.tChangeRevise(params.index,params.row)
                                    }
                                }
                            },'编辑'),
                            h('Button', {
                                props: {
                                    size: 'small',
                                },
                                style:{
                                    'margin-left':'10px'
                                },
                                on:{
                                    click(){
                                        _this.thishelp=params.index
                                        _this.thisform={
                                            id:params.row.id,
                                            version:params.row.version,
                                            context:params.row.context,
                                            title:params.row.title
                                        }
                                        _this.delok()
                                    }
                                }
                            },'删除')
                        ])
                    }
                }
            ]
        }
    },
    computed: {
        
    },
    methods: {
        init(){
            this.getHelp()
        },
        editok () {
            this.$api.repeater(this,'setHelp',this.thisform).then(res=>{
                if(res.success==true){
                    this.$set(this.data,this.thishelp,res.data)
                    this.$Notice.success({
                        title: '修改成功',
                    });
                }else{
                    this.$Notice.error({
                        title: '修改失败',
                        desc: res.error
                    });
                }
            })
        },
        editcancel(){

        },
        addok () {
            this.$api.repeater(this,'addHelp',this.addform).then(res=>{
                if(res.success==true){
                    this.data.push(res.data)
                    this.$Notice.success({
                        title: '添加成功',
                    });
                }else{
                    this.$Notice.error({
                        title: '添加失败',
                        desc: res.error
                    });
                }
            })
            // this.$api.addHelp(this.addform).then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.success==true){
            //             this.data.push(responseJson.data)
            //             this.$Notice.success({
            //                 title: '添加成功',
            //             });
            //         }else{
            //             this.$Notice.error({
            //                 title: '添加失败',
            //                 desc: responseJson.error
            //             });
            //         }
            //     })
            // })
        },
        addcancel(){

        },
        delok () {
            let data={
                query:{
                    id:this.thisform.id
                },
                data:this.thisform
            }
            this.$api.repeater(this,'delHelp',data).then(res=>{
                if(res.success==true){
                    this.$Notice.success({
                        title: '删除成功',
                    });
                    this.data.splice(this.thishelp,1);
                }else{
                    this.$Notice.error({
                        title: '删除失败',
                        desc: res.error
                    });
                }
            })
            // this.$api.delHelp(data).then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.success==true){
            //             this.$Notice.success({
            //                 title: '删除成功',
            //             });
            //             this.data.splice(this.thishelp,1);
            //         }else{
            //             this.$Notice.error({
            //                 title: '删除失败',
            //                 desc: responseJson.error
            //             });
            //         }
            //     })
            // })
        },
        getHelp(){
            this.$api.repeater(this,'getHelp').then(res=>{
                if(res.data==null){
                    this.data=[]
                }else{
                    this.data=res.data
                }
            })
            // this.$api.getHelp().then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.data==null){
            //             this.data=[]
            //         }else{
            //             this.data=responseJson.data
            //         }
            //     })
            // })
        },
        addHelp(){
            this.addform={
                context:'',
                title:''
            }
            this.addmodal=true
        }
    },
    mounted (){
        // tinymce.init({
        //     selector: '#articleEditor',
        //     branding: false,
        //     elementpath: false,
        //     height: 400,
        //     language: 'zh_CN.GB2312',
        //     menubar: 'edit insert view format table tools',
        //     theme: 'modern',
        //     plugins: [
        //         'advlist autolink lists link image charmap print preview hr anchor pagebreak imagetools',
        //         'searchreplace visualblocks visualchars code fullpage',
        //         'insertdatetime media nonbreaking save table contextmenu directionality',
        //         'emoticons paste textcolor colorpicker textpattern imagetools codesample'
        //     ],
        //     toolbar1: ' newnote print preview | undo redo | insert | styleselect | forecolor backcolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image emoticons media codesample',
        //     autosave_interval: '20s',
        //     image_advtab: true,
        //     table_default_styles: {
        //         width: '100%',
        //         borderCollapse: 'collapse'
        //     }
        // });
        this.init()
    },
    destroyed () {
        // tinymce.get('articleEditor').destroy();
    }
};
</script>
